@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme static {
  /** Typography  **/
  --font-sans: "Geist", "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", "SF Mono", Consolas, "Roboto Mono", monospace;

  /* Misc */
  --border-width-element: 1px;
  --elbow-size: 1rem;
  --elbow-offset: var(--border-width-element);
  --elbow-width: var(--border-width-element);
  --elbow-opacity: 0.7;
  --scanlines-opacity: 0.03;
  --grid-opacity: 0.05;
  --grid-size: 24px;
  --grid-border-width: 1px;

  --stripe-border-size: 1rem;
  --stripe-inset: calc(var(--stripe-border-size) / 1);
  --stripe-size: 20px;
  --stripe-gap-size: calc(var(--stripe-size) / 2);

  --loader-stripe-width: 15px;
  --loader-stripe-speed: 0.5s;

  /** Shadows  **/
  --shadow-xlong:
    0px 89px 36px rgb(0 0 0 / 0.01), 0px 50px 30px rgb(0 0 0 / 0.03),
    0px 22px 22px rgb(0 0 0 / 0.04), 0px 6px 12px rgb(0 0 0 / 0.05);
  --shadow-long:
    0 44px 18px 0 rgba(0, 0, 0, 0.01), 0 25px 15px 0 rgba(0, 0, 0, 0.05),
    0 11px 11px 0 rgba(0, 0, 0, 0.09), 0 3px 6px 0 rgba(0, 0, 0, 0.1);
  --shadow-short:
    0px 10px 15px -3px rgb(0 0 0 / 0.05), 0px 4px 6px -2px rgb(0 0 0 / 0.02);
  --shadow-xshort:
    0px 7px 3px rgb(0 0 0 / 0.01), 0px 4px 2px rgb(0 0 0 / 0.03),
    0px 2px 2px rgb(0 0 0 / 0.04), 0px 0px 1px rgb(0 0 0 / 0.05);

  /** Radius  **/
  --radius-base: 0.375rem; /* (6px) */
  --radius-xs: calc(var(--radius-base) * 0.333333); /* (2px) */
  --radius-sm: calc(var(--radius-base) * 0.666666); /* (4px) */
  --radius-md: var(--radius-base); /* (6px) */
  --radius-lg: calc(var(--radius-base) * 1.333333); /* (8px) */
  --radius-xl: calc(var(--radius-base) * 2); /* (12px) */
  --radius-2xl: calc(var(--radius-base) * 3); /* (18px) */
  --radius-3xl: calc(var(--radius-base) * 4); /* (24px) */
  --radius-4xl: calc(var(--radius-base) * 5.333333); /* (32px) */

  /** Button Sizing  **/
  --button-size-sm: calc(var(--spacing) * 7);
  --button-size-md: calc(var(--spacing) * 9);
  --button-size-lg: calc(var(--spacing) * 11);
  --button-size-xl: calc(var(--spacing) * 13);
  --button-px-mul: 0.5;
  --button-px-icon-mul: 0.35;
  --button-px-gap-mul: 0.25;

  /** Spacing  **/
  --spacing-element-md: calc(var(--spacing) * 4);
  --spacing-element-sm: calc(var(--spacing) * 3);
  --spacing-element-lg: calc(var(--spacing) * 6);
  --spacing-element-xl: calc(var(--spacing) * 8);
  --spacing-element-2xl: calc(var(--spacing) * 10);

  /** Colors  **/
  --color-background: oklch(1 0 0);
  --color-foreground: oklch(0.141 0.005 285.823);
  --color-card: oklch(1 0 0);
  --color-card-foreground: oklch(55.2% 0.016 285.938);
  --color-popover: oklch(1 0 0);
  --color-popover-foreground: oklch(0.141 0.005 285.823);
  --color-primary: oklch(0.21 0.006 285.885);
  --color-primary-foreground: oklch(0.985 0 0);
  --color-secondary: oklch(0.967 0.001 286.375);
  --color-secondary-foreground: oklch(0.21 0.006 285.885);
  --color-muted: oklch(0.967 0.001 286.375);
  --color-muted-foreground: oklch(0.552 0.016 285.938);
  --color-accent: oklch(0.967 0.001 286.375);
  --color-accent-foreground: oklch(0.21 0.006 285.885);
  --color-destructive: oklch(63.7% 0.237 25.331);
  --color-destructive-foreground: oklch(25.8% 0.092 26.042);
  --color-warning: oklch(85.2% 0.199 91.936);
  --color-warning-foreground: oklch(27.9% 0.077 45.635);
  --color-border: oklch(0.92 0.004 286.32);
  --color-input: oklch(0.92 0.004 286.32);
  --color-ring: oklch(0.705 0.015 286.067);
  --color-subtle: oklch(0.705 0.015 286.067);
  --color-active: oklch(69.6% 0.17 162.48);
  --color-active-foreground: oklch(97.9% 0.021 166.113);
  --color-active-ring: oklch(69.6% 0.17 162.48 / 20%);
  --color-active-accent: oklch(69.6% 0.17 162.48 / 10%);
  --color-inactive: oklch(0.7022 0.1892 22.23);
  --color-inactive-foreground: oklch(97.1% 0.013 17.38);
  --color-inactive-ring: oklch(57.7% 0.245 27.325 / 20%);
  --color-inactive-accent: oklch(57.7% 0.245 27.325 / 10%);
  --color-agent: oklch(58.5% 0.233 277.117);
  --color-agent-foreground: color-mix(in oklch, var(--color-agent) 10%, white);
  --color-client: oklch(62.3% 0.214 259.815);
  --color-client-foreground: color-mix(
    in oklch,
    var(--color-client) 10%,
    white
  );
  --color-chart-1: oklch(0.646 0.222 41.116);
  --color-chart-2: oklch(0.6 0.118 184.704);
  --color-chart-3: oklch(0.398 0.07 227.392);
  --color-chart-4: oklch(0.828 0.189 84.429);
  --color-chart-5: oklch(0.769 0.188 70.08);
  --color-elbow: var(--color-ring);

  /** Backgrounds  **/
  --background-image-cardGradientBorder:
    linear-gradient(90deg, var(--color-background), var(--color-background)),
    linear-gradient(
      0deg,
      color-mix(in oklch, var(--color-border) 92%, black),
      var(--color-border)
    );

  --background-clip-cardGradientBorder: padding-box, border-box;

  /* Animations */
  @keyframes scroll {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: calc(var(--loader-stripe-width) * 2.828427125) 0;
    }
  }

  @keyframes highlight-focus {
    0% {
      transform: scale(1.5);
      opacity: 0.3;
    }
    40% {
      transform: scale(1);
      opacity: 0.8;
    }
    50% {
      opacity: 1;
    }
    60% {
      opacity: 0.3;
    }
    70% {
      opacity: 1;
    }
    80% {
      opacity: 0.3;
    }
    90% {
      opacity: 1;
    }
    100% {
      opacity: var(--highlight-final-opacity, 1);
    }
  }
  --animate-highlight: highlight-focus 1.2s ease-in-out forwards;

  /* DEPRECATED */
  --radius-panel: var(--radius-sm);
}

.dark {
  --color-background: oklch(0.141 0.005 285.823);
  --color-foreground: oklch(0.985 0 0);
  --color-card: oklch(0.21 0.006 285.885);
  --color-card-foreground: oklch(0.985 0 0);
  --color-popover: oklch(0.21 0.006 285.885);
  --color-popover-foreground: oklch(0.985 0 0);
  --color-primary: oklch(0.92 0.004 286.32);
  --color-primary-foreground: oklch(0.21 0.006 285.885);
  --color-secondary: oklch(0.274 0.006 286.033);
  --color-secondary-foreground: oklch(0.985 0 0);
  --color-muted: oklch(0.274 0.006 286.033);
  --color-muted-foreground: oklch(0.705 0.015 286.067);
  --color-accent: oklch(0.274 0.006 286.033);
  --color-accent-foreground: oklch(0.985 0 0);
  --color-destructive: oklch(57.7% 0.245 27.325);
  --color-destructive-foreground: oklch(97.1% 0.013 17.38);
  --color-warning: oklch(79.5% 0.184 86.047);
  --color-warning-foreground: oklch(27.9% 0.077 45.635);
  --color-border: oklch(1 0 0 / 10%);
  --color-input: oklch(1 0 0 / 15%);
  --color-ring: oklch(0.552 0.016 285.938);
  --color-subtle: oklch(44.2% 0.017 285.786);
  --color-elbow: var(--color-ring);
  --color-active: oklch(0.7019 0.15768 160.4375);
  --color-active-foreground: oklch(0.9793 0.0207 166.11);
  --color-active-ring: oklch(0.7019 0.15768 160.4375 / 40%);
  --color-active-accent: oklch(0.7019 0.15768 160.4375 / 20%);
  --color-inactive: oklch(0.7022 0.1892 22.23);
  --color-inactive-foreground: oklch(0.9705 0.0129 17.38);
  --color-inactive-ring: oklch(0.7022 0.1892 22.23 / 20%);
  --color-inactive-accent: oklch(0.7022 0.1892 22.23 / 10%);
  --color-agent: oklch(58.5% 0.233 277.117);
  --color-agent-foreground: color-mix(in oklch, var(--color-agent) 20%, white);
  --color-client: oklch(62.3% 0.214 259.815);
  --color-client-foreground: color-mix(
    in oklch,
    var(--color-client) 20%,
    white
  );
  --color-chart-1: oklch(0.488 0.243 264.376);
  --color-chart-2: oklch(0.696 0.17 162.48);
  --color-chart-3: oklch(0.769 0.188 70.08);
  --color-chart-4: oklch(0.627 0.265 303.9);
  --color-chart-5: oklch(0.645 0.246 16.439);

  --shadow-long:
    0px 89px 36px rgb(0 0 0 / 0.85), 0px 50px 30px rgb(0 0 0 / 0.9),
    0px 22px 22px rgb(0 0 0 / 0.92), 0px 6px 12px rgb(0 0 0 / 0.95);
  --shadow-short:
    0px 10px 15px -3px rgb(0 0 0 / 0.9), 0px 4px 6px -2px rgb(0 0 0 / 0.85);
  --shadow-xshort:
    0px 7px 3px rgb(0 0 0 / 0.8), 0px 4px 2px rgb(0 0 0 / 0.85),
    0px 2px 2px rgb(0 0 0 / 0.9), 0px 0px 1px rgb(0 0 0 / 0.92);

  --background-image-cardGradientBorder:
    linear-gradient(90deg, var(--color-background), var(--color-background)),
    linear-gradient(
      0deg,
      color-mix(in oklch, var(--color-border) 90%, white),
      var(--color-border)
    );
}

@layer base {
  * {
    border-color: var(--color-border);
    outline-color: color-mix(in oklch, var(--color-ring));
  }

  :root {
    color: var(--color-foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
@import "./components.css";
@import "./utilities.css";
